 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>消息盒子</title>

<link rel="stylesheet" href="${ctxPath}/layui/css/layui.css">
<style>
.layim-msgbox{margin: 15px;}
.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
.layim-msgbox li p span{padding-left: 5px; color: #999;}
.layim-msgbox li p em{font-style: normal; color: #FF5722;}

.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
.layim-msgbox-user{padding-top: 5px;}
.layim-msgbox-content{margin-top: 3px;}
.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
</style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.fromGroup){ }}
    <li data-fromUid="{{ item.fromUid }}" data-fromGroup="{{ item.fromGroup }}" data-no="{{item.no}}" data-uid="{{item.uid}}">
      <a  href="#" onclick="showUserInfo({{ item.fromUid }})" >
        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
      </a>
      <p href="#" class="layim-msgbox-user">
        <a onclick="showUserInfo({{ item.fromUid }})" >{{ item.user.username||'' }}</a>
        <span>{{ item.dateTime }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{ item.content }} 
        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
      {{# if(item.type==1) { }}
      		已同意
      {{# }else if(item.type==-1){ }}
      		已拒绝
      {{#  } else{ }}
	        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
	        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
      {{# } }}
	  </p>
    </li>
  {{# } else if(item.href=='group'){ }}
	<li data-fromUid="{{ item.fromUid }}" data-avatar="{{item.group.avatar}}" data-name="{{item.group.name}}" data-no="{{item.no}}" data-uid="{{item.uid}}" >
      <img src="{{ item.group.avatar }}" class="layui-circle layim-msgbox-avatar">
      <p href="#" class="layim-msgbox-user">
        {{ item.group.name||'' }}
        <span>{{ item.dateTime }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{ item.content }} 
        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
      {{# if(item.type==1) { }}
      		已同意
      {{# }else if(item.type==-1){ }}
      		已拒绝
      {{#  } else{ }}
	        <button class="layui-btn layui-btn-small" data-type="agreeGroup">同意</button>
	        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuseGroup">拒绝</button>
      {{# } }}
	  </p>
    </li>
   {{# }else{ }}
    <li class="layim-msgbox-system">
      <p><em>系统：</em>{{ item.content }}<span>{{ item.dateTime }}</span></p>
    </li>
  {{# }}}
{{# }); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html 
-->


<script src="${ctxPath}/layui/layui.js"></script>
<script>
layui.use(['layim', 'flow'], function(){
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,flow = layui.flow;

  var cache = {}; //用于临时记录请求到的数据

  //请求消息
  var renderMsg = function(page, callback){
    $.post('${ctxPath}/notify/findByUid', {
      page: page || 1,
      uid:'${userInfo.id}'
    }, function(res){
      layui.each(res.data, function(index, item){
        cache[item.fromUid] = item.user;
      });
      callback && callback(res.data, res.pages);
    });
  };

  //消息信息流
  flow.load({
    elem: '#LAY_view' //流加载容器
    ,isAuto: false
    ,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
    ,done: function(page, next){ //加载下一页
      renderMsg(page, function(data, pages){
        var html = laytpl(LAY_tpl.value).render({
          data: data
          ,page: page
        });
        next(html, page < pages);
      });
    }
  });

  //打开页面即把消息标记为已读
  $.post('${ctxPath}/notify/updateByUid', {
    isRead: 1,
    uid:'${userInfo.id}'
  });

  //操作
  var active = {
    //同意
    agree: function(othis){
      var li = othis.parents('li')
      ,fromUid = li.data('fromuid')
      ,no = li.data('no')
      ,from_group = li.data('fromgroup')
      ,user = cache[fromUid]
      ,uid = li.data('uid');
      //选择分组
      parent.layui.layim.setFriendGroup({
        type: 'friend'
        ,username: user.username
        ,avatar: user.avatar
        ,group: parent.layui.layim.cache().friend //获取好友分组数据
        ,submit: function(group, index){
          
          $.post('${ctxPath}/notify/agree', {
           	 no:no,
           	 tno:group
          }, function(res){
              parent.layer.close(index);
              if(res=='success'){
              	othis.parent().html('已同意');  
          	    parent.send('{type:"notifyAddFriend",mine:{"id":"'+uid+'"},toFriend:{"id":"'+fromUid+'"}}');	
              }else{
            	othis.parent().html('发生未知错误,请刷新重试');  
              }
          });    
        }
      });
    }

    //拒绝
    ,refuse: function(othis){
      var li = othis.parents('li')
      ,fromUid = li.data('fromuid')
      ,no = li.data('no');
      layer.confirm('确定拒绝吗？', function(index){
        $.post('${ctxPath}/notify/refuse', {
        	no: no //对方用户ID
        }, function(res){
	          layer.close(index);
	          if(res=='success'){
	          	othis.parent().html('<em>已拒绝</em>');	
	          }else{
	        	  othis.parent().html('<em>发生未知错误,请刷新重试</em>');	
	          }
        });
      });
    }
    ,
    agreeGroup: function(othis){
        var li = othis.parents('li')
        ,fromUid = li.data('fromuid')
        ,name = li.data('name')
        ,avatar = li.data('avatar')
        ,no = li.data('no');
  
       $.post('${ctxPath}/group/agreeInvite', {
       	 no:no,
       	 gid:fromUid
      }, function(res){
          if(res=='success'){
          	othis.parent().html('已同意');  
            parent.layui.layim.addList({
               type: 'group'
               ,avatar: avatar
               ,groupname: name
               ,id: fromUid 
             });
          }else{
        	othis.parent().html('发生未知错误,请刷新重试');  
          }
      });    
      } 
    ,refuseGroup: function(othis){
          var li = othis.parents('li')
          ,fromUid = li.data('fromuid')
          ,no = li.data('no');
          layer.confirm('确定拒绝吗？', function(index){
            $.post('${ctxPath}/group/refuseInvite', {
            	no: no //对方用户ID
            	,gid:fromUid
            }, function(res){
  	         	  layer.close(index);
    	          if(res=='success'){
    	          	othis.parent().html('<em>已拒绝</em>');	
    	          }else{
    	        	  othis.parent().html('<em>发生未知错误,请刷新重试</em>');	
    	          }
            });
          });
        }
  };

  $('body').on('click', '.layui-btn', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});

function showUserInfo(id){
	parent.showUserInfo(id);
}
</script>
</body>
</html>
